# 第三章 小程序环境搭建与开发环境介绍
小程序开发几乎不需要配置任何开发环境，只需要安装微信提供的一款名为微信Web开发者工具的IDE即可。本章我们将使用小程序开发工具新建一个官方提供的示例项目，并介绍开发工具的相关界面、功能与使用技巧。
# 3.1 开发前的第一步：注册小程序账号
建议开发者在准备开发/学习小程序前都应该首先前往微信公众平台注册一个小程序账号(个人/企业均可注册)。开发者可移步微信公众平台 https://mp.weixin.qq.com/ ，点击【账号分类】下的【小程序】，在小程序注册页面点击【前往注册】即可看到如==图==所示的小程序注册选项。
图：小程序注册选项
开发者按照选项要求填写相应信息即可注册。在随后的注册流程中，开发者可自行选择个人/企业/组织等不同类型的小程序账号。
这里需要开发者注意的是，不同类型的小程序账号在小程序功能支持上是有一些差别的，个人类型的账号有不少限制。比如个人类型的账号是无法开通微信支付的，包括我们前面所谈到的WebView功能也是无法使用的。但对于学习微信小程序开发来说，个人类型的账户已经足够了。
在成功注册账号后，你需要在微信开发者平台使用你的账号&密码进行登录，登录成功后将进入微信小程序的管理后台中。在管理后台中有许多对小程序的配置项，比如设置小程序名称、选择小程序Logo、版本管理、提交审核小程序等等。开发者可根据自己的实际需求进行相应的配置/设置。
图：小程序管理后台界面
目前，我们需要点击管理后台左侧【开发】，随后在右侧顶部点击【开发设置】，找到页面中的AppID(小程序ID)。AppID是非常重要的小程序ID，我们将在下个小节中使用这个AppID，请开发者妥善保管和保存。
# 3.2 微信Web开发者工具下载及安装
小程序的开发工具官方名称为：“微信开发者工具”，其中并不包含“小程序”3个字。看来微信的这个IDE并不想仅仅只是用来开发小程序。事实上也确实如此，这款开发工具不仅仅可以用来开发小程序，还可以用来调试运行在微信上的网页以及微信小游戏。
微信小游戏是一种特殊的小程序。关于游戏的制作和开发并不在本书的讨论范围内，有兴趣的开发者可以移步微信小游戏开发文档进行学习
微信开发者工具的官方下载地址为：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html。
现在，微信官方提供了3个不同用途的开发工具版本：
- 开发版 ( Nightly Build )
- 预发布版（ RC Build)
- 稳定版 （ Stable Build ）
每个版本下又分别提供了 Windows 64、Windows 32和MacOS 三个细分版本。
从稳定性上来说，稳定版 > 预发布版 > 开发版。建议开发者使用预发布版。
本书中的项目开发环境为MacOS，所以这里选择预发布版的MacOS安装包。这里要特别提醒的是，小程序的开发工具不支持Windows XP系统，这一点官方文档没有明确指出。请使用Windows 7或者Windows 7以上的Windows操作系统或者MacOS来安装开发工具。各位读者请根据自己计算机操作系统的实际情况下载对应版本的安装包。
不同操作系统的微信开发者工具并没有什么不同，无论你是Windows还是MacOS，本书中的内容都完全一致并没有区别
下载完成后，双击运行安装包出现 ==下图== 所示的界面:
图：MaCOS版安装向导首页
请按照对应操作系统的默认安装方式安装完成即可。
# 3.3 新建第一个项目
开发工具安装完成后，我们来新建第一个小程序项目。双击打开微信开发者工具，如果你是第一次打开或者长时间未打开微信开发者工具，开发工具都会弹出一个二维码，请使用微信“扫一扫”扫描该二维码。进入微信开发者工具后你将看到==下图==的微信开发者工具首选页面：
图：开发者工具首选页面
开发者工具的左侧菜单栏共有2类4个选项，小程序项目下分别有【小程序】、【小游戏】和【代码片段】3个选项，每个选项代表一种不同项目类型：
- 小程序：如果你要开发小程序，请选择这个选项
- 小游戏：如果你要开发微信小游戏，请选择这个选项
- 代码片段：代码片段是一种可分享的小项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题等等。分享代码片段会得到一个链接，获得链接的人可以在本地直接打开这个代码片段
公众号网页项目下有1个选项：公众号网页。这种类型的项目是用来调试微信公众号网页的。
小游戏、公众号网页和小程序分属不同的开发体系，小游戏和公众号均不在本书的研究范围，所以我们只需关注第一个小程序这个项目选项。选择第一个【小程序】，然后在右侧点击 + ，这将打开一个新建小程序的面板，如==图==所示：
图：新建小程序面板
面板中需要填入的选项有：
- 【项目名称】给你的项目起个名字吧。建议使用英文，如HelloWorld，中文可能会引起一些未知错误。注意，项目名称不可以重名
- 【目录】给项目找个家，选择一个空的文件夹用于存放小程序的项目文件
- 【AppID】AppID可通过3.1小节的方式获取到，在此处填入AppID即可
- 【开发模式】请选择“小程序”
- 【后端服务】选择“不使用云服务”。”云服务“和”云开发“均是腾讯提供的一种快速服务端解决方案，并不是我们开发小程序服务端的必备选择。
- 【语言】选择“JavaScript”。如果你了解并决定使用TypeScript此处可选择TypeScript。关于TypeScript的优势，请参考本书第二章中关于TypeScript的描述。
如果你没有申请AppID，在第二步中，你也可以点击【AppID】下的【测试号】这个选项。小程序将为你自动生成一个用于测试的AppID。本书不建议使用测试的AppID，因为它也有诸多的限制和缺陷，仅适用于快速查看/体验小程序。
此外，你还可以通过点击面板顶部的【导入】选项将已经存在的小程序项目导入到微信开发者工具中。
一个可能的示例新建面板如==下图==：
开发者填好项目信息后，点击右下角的【新建】按钮即可创建一个官方默认的示例项目。
# 3.4 微信开发者工具界面功能介绍
成功创建项目后，将进入到==如图==所示的开发者工具主界面中。
图：微信开发者工具小程序示例项目主界面
新版的微信开发者工具功能相当多，我们不可能将所有的功能一一列举出来。并且很多功能对于还还没有小程序基本概念的开发者来说并不是很好理解。所以本章节我们只重点列出一些常用的功能，一些生僻的功能我们穿插到本书的后续章节中，这样更容易理解这些功能的作用。强烈建议开发者快速阅读本章节，在大概熟悉小程序开发工具的常用操作后即可开始后续开发。很多操作都是熟能生巧，无需强行记忆本章节内容。
我们可以将主界面分为以上6个区域，分别是
- 区域1 【模拟器】
- 区域2 【文件管理器】
- 区域3 【编辑器】
- 区域4 【调试面板】
- 区域5 【菜单栏】
- 区域6 【工具栏】
我们可以看到各个区域的小功能非常多，我们只选择一些对开发者非常重要的功能进行讲解。部分功能需要我们在深入学习小程序后才能理解，这里咱们先放一放，将这些菜单和按钮的使用方式穿插到本书后续部分，便于开发者更好理解。同时，也强烈建议开发者无需在学习初期过分纠结这些按钮的作用。
# 3.4.1 模拟器
【模拟器】主要是用来模拟小程序在真机上的显示效果与逻辑运行状态。我们可以在这里预览到小程序在真机上的运行情况。在模拟器的顶部有如==下图==所示的一条工具栏。“iPhone 6”这一栏可以让开发者选择模拟器的机型用来模拟小程序在不同机型上的运行情况；”75%“一栏可以调节模拟器的显示比例；“wifi”一栏，可以让我们选择不同的网络环境。
图：模拟器顶部按钮
# 3.4.2 文件管理器
【文件管理器】是项目文件的树状管理器，这里可以整体预览我们的代码文件与组织关系。在这部分的顶部，==下如图==，有3个较为重要的功能：最左侧的 + 号点击后会出现一个添加小程序各类文件的菜单用以添加文件；搜索按钮用来进行关键字搜索；省略号点击后将从操作系统中打开当前项目的文件夹；第四个箭头按钮点击后可以将所有文件的目录树折叠起来（如果当前文件树展开的层级很多，此功能非常有用）；最后侧的向左箭头点击后可以隐藏当前文件管理器。
除了可以点击 + 号进行文件的新建外，在当前树状管理器的某个节点右键也可以快速新建各种类型的小程序文件。点击任意的一个文件节点，可以在右侧【编辑器】里查看该文件的详细代码。
图：文件管理器顶部按钮
# 3.4.3 项目设置面板
【编辑器】就是我们开发者写代码的地方。
【调试面板】调试面板非常重要，我们在后续的章节中详细介绍。
【菜单栏】菜单栏功能较多，大多数菜单通过文字描述即可明白它的作用。这里着重介绍一下【设置】->【项目设置】。
图：项目设置细节
项目设置里包含了项目的基本信息以及其他重要设置，比如小程序基础库版本、ES6转ES5等设置。项目设置是非常重要的设置选项，但其中一些选项的意义需要我们在深入学习小程序后才能理解，这里就不再赘述了。默认情况下，开发者无需修改项目设置，但建议开发者将此处的【不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书】勾选上。
小程序的服务端接口理论上必须是HTTPS的。但在开发阶段我们服务端的接口可能暂时未支持HTTPS，勾选【不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书】可以让小程序不受这些限制，允许访问HTTP接口。
# 3.4.4 工具栏详解
【工具栏】工具栏上的按钮是我们经常需要用到的一些功能，所以微信将这些按钮直接列在了整个开发工具最显眼的位置。
- 工具栏最显著的位置放着4个按钮：【模拟器】、【编辑器】、【调试器】、【云开发】。点击这4个按钮可以打开/关闭相应的功能区域。
- 【小程序模式】这个选项有2个模式：小程序模式和插件模式，通常这里无需调整取默认的小程序模式即可，插件模式是用于开发小程序插件的。
- 【普通编译】这个选项用于选择小程序的编译模式，除了”普通编译“这个模式外，还可以选择”自定义编译模式“和”二维码编译模式“。对于我们还不太熟悉小程序开发的开发者来说，此时并不是介绍的合适时机，我们将放到后续的章节中来讲解。
- 【编译】点击后将重新运行整个小程序。由于小程序默认有”自动编译“，所以当我们更改项目代码后（必须保存文件更改），开发者工具将自动重新编译/运行小程序。
- 【预览】点击后，开发工具将编译当前小程序并实时生成一张二维码，开发者使用微信扫描这个二维码将在真机上运行当前小程序。
- 【真机调试】点击后，同样会编译当前小程序并实时生成一张二维码，扫码后同样会在真机上打开当前小程序。但不同于”预览“，开发工具在扫描二维码后，将打开一个新的”调试“页面，我们在真机上所有的操作信息都将实时的传送到开发者工具中。所以”真机调试“主要的目的是让开发者在真机上调试小程序，这是不同于【预览】的地方
- 【切后台】可以在开发工具中模拟小程序的前后台切换操作。以iPhone为例，当我们运行一个应用程序时，点击iPhone的“Home”键，应用程序将被切换到后台，但并没有关闭。如果我们想在开发工具中模拟真机上的切换操作，点击【切后台】即可实现。 具体的功能作用我们会在后面章节介绍小程序生命周期时讲解。
- 【清缓存】是非常重要的一个功能选项。点击【缓存】会出现一个子菜单，包括6个选项：【清除数据缓存】、【清除文件缓存】、【清除授权数据】、【清除网络缓存】、【清除登录状态】和【全部清楚】。清缓存选项是开发工具提供给我们用来清除各种缓存的小工具。关于各种缓存我们将在后面的项目章节中深入讲解。如果开发者遇到缓存相关问题是，可以考虑到此处进行处理。
- 【上传】当我们在开发工具中开发完毕一个小程序后，可以点击【上传】将小程序上传到腾讯的服务器并自动成为体验版。
这里要注意的是小程序只有通过审核后才能正式上线，体验版只是将小程序提交到了腾讯服务器，并未进入待审核的状态。开发者还需要登录到小程序管理后台，将体验版提交，才能进入待审核的状态等待微信审核。这里先简单概括下小程序的发布流程，希望能够让开发者对小程序的发布有一个整体上的认知：【开发】-> [测试] -> [提交体验版]->[提交审核] -> 【等待审核】-> [发布正式版]。
【版本管理】这是开发者工具提供的一个可视化的Git管理工具。如果开发者对Git还不熟悉，强烈建议开发者寻找相关资料学习Git。Git已经成为每个开发者必备的知识技能。
【社区】点击后可进入小程序社区
# 3.4.5 调试小程序
大多数情况下，我们都是在开发工具中进行调试（开发工具的调试参考3.4.5调试小程序这个章节）。但某些情况下，极有可能出现
毫无疑问，调试对于开发任何应用程序都是非常重要的。熟悉小程序的调试是每个小程序开发者的必修课。本章节将花大量的篇幅为开发者讲解小程序的调试面板和调试技巧。
默认情况下，调试面板出于隐藏的状态，开发者需要点击【工具栏】中的【调试器】才能打开调试面板。但默认调试面板的可视区域非常小，不便于开发者调试。此时，我们可以点击调试面板顶部最右侧的层叠方形图标 
，这将打开一个全屏的调试面板如==下图==所示。
图：Sources菜单选中时的调试面板
我们首先需要关注的是调试面板顶部从左向右的10个视图菜单。我们重点介绍其中的6个。
图：10个调试面板视图菜单
【Console】Console视图是调试面板默认的视图，主要用于输出信息，我们在JS代码中使用console.log(message)所输出的messag就会显示在这个视图中。当然开发者也可以在这里输入并执行JS代码。
图：Console视图
【Sources】Sources视图用于显示当前项目的JS文件以及文件结构（树状）。它是我们进行断点调试的的主要视图窗口。那么如何在小程序中进行断点调试呢？首先我们需要点开Sources视图，如==下图==所示。
图：断点调试中的Sources视图
在Sources视图的最左侧树状文件管理器中找到我们要打断点的文件，比如==上图==中我们就选中了index.js?[sm]这个文件。打开这个文件后，在中间区域会显示这个文件的详细代码（源码），我们只需要把鼠标移动到某一行，点击该行代码前的行号即可设置断点。当代码运行到断点处时将停止继续执行。常用快捷键有【F10】单步执行，【F11】进入方法，【F8】继续运行到下一个断点。中查看。Sources视图的最右侧区域将显示断点调试状态下变量的状态与快捷按钮。
开发者应该注意到，左侧树状管理目录中有许多相同的文件名，一种带有[sm]后缀，另外一种并不带次后缀。断点调试的断点务必打在带有[sm]的文件代码中。
【Network】Network视图主要用于观察和显示网络连接的相关情况，它同样是一个非常好用的调试网络请求的工具。这里的Network视图和Chrome浏览器里的Network视图几乎一样。
图：Network视图
【AppData】AppData视图用于显示项目中被激活的所有页面的数据情况，这些数据主要是用来做数据绑定。关于数据绑定我们同样放在项目开发中具体讲解。在这里不仅可以查看数据情况，还可以更改数据，小程序框架会实时地将数据的变更情况反馈到UI界面上。
图：AppData视图
【Storage】Storage视图用于显示当前项目的数据缓存情况。关于数据缓存将在项目开发中具体讲解。
图：Storage视图
【Wxml】Wxml视图是非常重要的一个功能模块。这个视图类似于Chrome调试工具下的Elements模块，主要用于调试Wxml标签和相关CSS样式，调试方法同Chrome一样。如果你是一个前端新手，那么建议好好地摸索一下这个功能模块的调试技巧，绝大多数和样式、标签相关的问题，都需要依靠这个模块来调试。
图：在Wxml视图下可以同时查看 UI、标签和CSS样式3者的相关数据及关联关系
以上的6个模块功能对我们开发非常有帮助。如果你在开发中遇到一些稀奇古怪的问题，那么最好的解决办法就是使用这6个视图来解决。我们在后面的章节中也会经常回过头来讲解这些视图的使用技巧，并使用这些视图中的功能解决我们的问题。
以上6个视图包含的功能非常多，不需要现在就把每个功能细节了解的非常清楚。笔者的建议是知道以上6个视图是做什么的以及它们简单的使用方式即可，在后续的内容中将会用实际的数据来演示如何使用这些视图中的功能，开发者无须担心，轻轻松松地继续阅读本书吧!
# 3.4.6 快速打开官方API文档
作为一个开发者，官方API文档的使用会非常频繁。不同于其他开发工具【F1】是帮助选项，小程序的【F1】给出的是【查看命令面板】这项功能。小程序提供了一个快速打开官方文档的方法，即点击开发工具顶部【菜单栏】中的【微信开发者工具】→【开发者文档】，即可马上打开系统浏览器进入官方API文档。
官方API文档除了用于经常查阅API外，推荐大家在版本更新后第一时间去查看更新内容。最新的更新内容对我们开发者来说尤其重要，更新内容通常会出现在官方API文档的【工具】→【下载】→【历史更新日志】里。
# 3.4.7 微信开发者工具常见操作汇总
Q ：如何在开发工具中切换不同的微信账号？ A ：【菜单】→ 【微信开发者工具】→【切换账号】
Q ：如何更新开发工具版本？ A ：通常情况下微信开发者工具将在每次工具启动时自动检查新版本并提示下载。但也可能由于某些未知原因不会提示更新。此时我们可以通过【菜单】→【微信开发者工具】→【检查更新】来手动更新
Q ：如何快速打开小程序开发文档？ A ：【菜单】→【微信开发者工具】→【开发者文档】
Q ：如何查看/修改快捷键？ A ：按F1键会出现一个命令菜单，该菜单下会出现所有快捷键列表。如果开发者要修改快捷键可以通过【菜单】→【设置】→【快捷键设置】
Q ：如何修改字体大小/开发工具皮肤等外观？ A ：【菜单】→【设置】→【外观设置】
本章我们主要预览了整个微信Web开发者工具的全貌。笔者一向认为，工具的使用需要用具体的案例来推动，我们会在后续的项目编写中经常使用这几个选项卡和工具来解决开发中遇到的各类问题。下一章，我们将正式开始小程序的编码之旅。